<template>
  <div :class="prefixCls">
    <BasicForm @register="registerForm" @submit="handleSubmit" :class="`${prefixCls}-form`"> 
      <template #formFooter>
        <a-button :class="`${prefixCls}-form-submit`" @click="handleSubmit" type="primary" :loading="loading" style="margin-right: 0.9rem">保存</a-button>
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { BasicForm, FormSchema } from '/@/components/Form/index';
import { useConfigForm, ConfigFormProps } from '/@/views/system/configCenter/hooks/useConfigForm'
import { ConfigKey } from '/@/views/system/config/config.model';
import { useModal } from '/@/components/Modal';
import { useDesign } from '/@/hooks/web/useDesign';
import { rules } from '/@/utils/helper/validator';

const emit = defineEmits(['query-success'])

const { prefixCls } = useDesign('gitee')
const [registerVerifyModal, { openModal: openVerifyModal }] = useModal();

const formSchema: FormSchema[] = [
  {
    field: 'clientId',
    label: "Client ID",
    component: "Input",
    required: true
  },
  {
    field: 'clientSecret',
    label: 'Client Secret',
    component: 'Input',
    required: true
  },

  {
    field: 'callbackUrl',
    label: "回调地址",
    rules: rules.rule('http', true),
    component: "Input"
  },

  {
    field: 'accessToken',
    label: "私人令牌",
    helpMessage: '用于调用开放接口',
    required: true,
    component: "Input"
  },
];


const configFromProps : ConfigFormProps = {
  configKey: ConfigKey.GITEE,
  schemas: formSchema,
  labelWidth: 100
}
const { registerForm, handleSubmit, loading} = useConfigForm(configFromProps, emit)

</script>


<style lang="less">
  @prefix-cls: ~'@{namespace}-gitee';

  .@{prefix-cls} {
    padding: 10px;
    background-color: @component-background;
    &-form {
      width: 700px;
      &-submit {
        margin-left: 100px;
      }
    }
  }

</style>./useConfigForm